<template>
    <div class="common-size adminOffice_category">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="page-content">
            <div class="page-chart page-chart4">
                <div class="legendDom">
                    <div :style="{width: 100 / legendData.length + '%'}" class="legendDiv" v-for="(item, index) in legendData">
                        <div class="legend-icon" :class="addClass(index)"></div>
                        <div class="legend-text">{{item}}</div>
                    </div>
                </div>
                <div ref="useAgeLimitDom" class="chart-box">

                </div>
                <div class="y-name">单位:台</div>
            </div>
            <div class="describe_box">
                <div class="describe-text" v-html="item" v-for="(item, index) in textData">
                </div>
            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  let echarts = require('echarts')
  import echartsConfig from '@/assets/javascript/echartsConfig'
  export default {
    name: 'adminOffice_category',
    props: ['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        legendData: [],
        pageTitle: '科室多维分析',
        detailTitle: '品类分析'
      }
    },
    computed:{
      chartDataTable () {
        return this.chartData.chartData
      },
      textData () {
        return this.chartData.textData
      },
      oneRemarkData () {
        return this.chartData.remark
      }
    },
    created() {
    },
    mounted() {
      this.deviceNumChart()
    },
    methods: {
      addClass (index) {
        return 'legend-icon' + index
      },
      deviceNumChart () {
        const  brandData = this.chartData.chartData
        if (!brandData) {
          return false
        }
        const color = [
          {
            start: '#C2B6D9',
            end: '#7D76B6'
          },
          {
            start: '#9EC3E8',
            end: '#4E8AC9'
          },
          {
            start: '#A8D49D',
            end: '#72BE72'
          },
          {
            start: '#F9E8A0',
            end: '#F2CB2D'
          },
          {
            start: '#F9C991',
            end: '#F08C65'
          }
        ]
        this.legendData = []
        let x_data = []
        let y_data = []
        brandData.forEach((admin, index) => {
          this.legendData.push(admin.adminName)
          admin.categoryData.forEach((brand) => {
            x_data.push(brand.categoryName.slice(0, 9))
            y_data.push({
              value: brand.value,
              itemStyle: {
                normal: {
                  barBorderRadius: [5,5, 0, 0],
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: color[index].start // 0% 处的颜色
                    }, {
                      offset: 1, color: color[index].end // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            })
          })
        })
        const option = {
          title: {
            show: true,
            text: '设备TOP5科室品类分析',
            left: 'center',
            bottom: '3%',
            textStyle: {
              color: '#666',
              fontWeight: 400,
              fontSize:echartsConfig.titleFontSize || 14
            }
          },
          backgroundColor: '#fff',
          xAxis: {
            type: 'category',
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              interval:0,
              textStyle: {
                color:'#989898'
              },
              formatter: (value) => {
                return value.split('').join('\n')
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            },
            data : x_data
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: 80,
            containLabel: true
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#989898'
              }
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            }
          },
          series: [
            {
              type:'bar',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  rotate: 90,
                  textStyle: {
                    color:'#231815',
                    fontWeight: 'bolder',
                    fontSize: 14
                  }
                }
              },
              barWidth: '25%',
              itemStyle: {
                normal: {
                  barBorderRadius: [5,5, 0, 0],
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#9EC3E8' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#4E8AC9' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              },
              data:y_data
            },
          ]
        };
        this.liquidfillEchart = echarts.init(this.$refs.useAgeLimitDom)
        this.liquidfillEchart.setOption(option)
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .adminOffice_category {
        .page-content {
            margin-top: 10px;
            .page-chart {
                margin-bottom: 35px;
                position: relative;
                .legendDom {
                   position: absolute;
                    top:50px;
                    left: 3%;
                    right: 4%;
                    font-size: 0;
                    .legendDiv {
                        font-size: 12px;
                        display: inline-block;
                        vertical-align: middle;
                        text-align: center;
                        font-weight: bold;
                        .legend-icon {
                            width: 10px;
                            height: 10px;
                            border-radius: 100%;
                            background: #7D76B6;
                            background:-webkit-gradient(linear, 0 0, 0 bottom, from(#C2B6D9), to(#7D76B6));
                            display: inline-block;
                            vertical-align: middle;
                            &.legend-icon0 {
                                background:-webkit-gradient(linear, 0 0, 0 bottom, from(#C2B6D9), to(#7D76B6));
                            }
                            &.legend-icon1 {
                                background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9EC3E8), to(#4E8AC9));
                            }
                            &.legend-icon2 {
                                background:-webkit-gradient(linear, 0 0, 0 bottom, from(#A8D49D), to(#72BE72));
                            }
                            &.legend-icon3 {
                                background:-webkit-gradient(linear, 0 0, 0 bottom, from(#F9E8A0), to(#F2CB2D));
                            }
                            &.legend-icon4 {
                                background:-webkit-gradient(linear, 0 0, 0 bottom, from(#F9C991), to(#F08C65));
                            }
                        }
                        .legend-text {
                            display: inline-block;
                            vertical-align: middle;
                            margin-left: 10px;
                            max-width: 80%;
                        }
                    }
                }
                .chart-box {
                    width: 100%;
                    height: 100%;
                }
                .y-name {
                    position: absolute;
                    top: 20px;
                    right: 4%;
                    font-size: 12px;
                    color: #989898;
                }
            }
            .describe_box {
                .describe-text {
                    text-indent:2em;
                    color: #666;
                    font-size: 18px;
                    line-height: 32px;
                    margin-bottom:10px;
                }
            }
        }
    }
</style>
